import { colors } from "../../../../utils/config";
import * as echarts from "../../../../plugins/echarts";
import { tokw } from "./../../../../utils/index";
import { upCoreDataByMidRequest } from "../../../../server/index";

// 折线图
Component<any, any, any>({
  properties: {
    mid: {
      type: String,
      value: "",
      observer(mid: string) {
        (this as any).getChartInfo(mid);
      },
    },
  },
  data: {
    ec: {
      lazyLoad: true,
    },
    isLoaded: false,
    loading: true,
    active: 0,
    index: 0, // 总量0 | 1 总量
    tabs: {
      fans: "粉丝",
      plaies: "播放",
      likes: "点赞",
      collects: "收藏",
      comments: "评论",
      coins: "投币",
    },
  },
  ready() {
    // 获取到子组件的实例
    // this.loadEchart(
    //   ["10-25", "10-26", "10-27", "10-28", "10-28", "10-30", "10-31"],
    //   [18, 36, 65, 30, 7124548, 40, 33],
    //   "粉丝"
    // );
  },
  methods: {
    getChartInfo(mid: string) {
      upCoreDataByMidRequest({mid, CycleLength:90}).then(res=>{
        console.log(res);
        this.setData({
          loading: false
        })
      })
    },
    // 初始化手动加载图表
    loadEchart(xData: Array<string>, seriesData: [], name: string) {
      this.ecComponent = this.selectComponent("#core-data-line");
      // 手动加载图表
      this.ecComponent.init(
        (canvas: any, width: number, height: number, dpr: number) => {
          // 在这里初始化图表
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr, // new
          });
          // 初始化图表
          initChart(chart, xData, seriesData, name);
          // 注意这里一定要返回 chart 实例，否则会影响事件处理等
          return chart;
        }
      );
    },
  },
});



function initChart(
  chart: any,
  xData: Array<string>,
  seriesData: [],
  name: string
) {
  var option = {
    // backgroundColor:'#f00',
    grid: {
      containLabel: true,
      right: "0%",
      left: "0%",
      top: "6%",
      bottom: "0%",
    },
    tooltip: {
      trigger: "axis",
      formatter: (option: any) => {
        let str = "";
        option.forEach((item: any) => {
          str +=
            item.name +
            "\n" +
            item.marker +
            item.seriesName +
            "量" +
            " : " +
            tokw(item.value);
        });
        return str;
      },
      axisPointer: {
        type: "line",
      },
      show: true,
      backgroundColor: "rgba(0, 0, 0, 0.7)",
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: {
      type: "category",
      // data: ["10-25", "10-26", "10-27", "10-28", "10-28", "10-30", "10-31"],
      data: xData,
      axisLabel: {
        interval: 0,
        rotate: 30,
      },
      axisTick: {
        color: "#ddd",
        alignWithLabel: true,
      },
      axisLine: {
        lineStyle: {
          color: "#9d9d9d",
          width: 1,
        },
      },
    },
    yAxis: {
      x: "center",
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
      axisLabel: {
        formatter: (value: string) => tokw(value),
      },
    },
    series: [
      {
        // name: "粉丝",
        name: name,
        type: "line",
        smooth: true,
        color: colors.primaryColor,
        data: seriesData,
        // data: [18, 36, 65, 30, 78, 40, 33],
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: colors.rgbColor(0.2),
            },
            {
              offset: 1,
              color: colors.rgbColor(0.1),
            },
          ]),
        },
      },
    ],
  };
  chart.setOption(option);
}